# Walkthrough

## Intro
    - About me
        - Korey MacDougall
        - Researcher and Developer
        - New to Sudbury
        - Founder of Nickel City Software Inc.
        - Lover of GNU/Linux, FLOSS, and vim
        - Have been working with rails for approx 2.5 yrs

## Scope of workshop
    - Today we will try to cover: 
        - Tools/software needed to develop a rails app
        - Basics of Rails philosophy and architectural pattern (MVC)
        - How to create a simple rails app: an RPG character creator

## Two notes
    - all code is at notabug.org/kmac
    - running app looks like this...

## Environment Setup

### 0. Operating System / Virtual Machine
    - virtualbox.org/wiki/Downloads
    - guest additions

### 1. Need a Ruby interpreter
    - sudo apt-get install ruby-dev

### 1a. Optionally, a ruby-version switcher
    - chruby
    - rbenv
    - rvm

### 2. JavaScript runtime - we can use NodeJS
    - Linux:        sudo apt-get install nodejs
    - windows:      https://nodejs.org/en/download/
    - macOS:        brew install node

### 3. Bundler - ruby package manager
    - bundler.io
    - a 'gem' is a ruby package
    - sudo gem install bundler
    - or try (windows): gem install bundler

### 4. Database engine
    - sqlite for development
    - sudo apt-get install libsqlite3-dev

### 5. rails gem
    - sudo gem install rails


### 6. a text editor
    - atom
    - https://flight-manual.atom.io/getting-started/sections/installing-atom/

## Rails Introduction - some notes and high-level principles

### Rails is a large, complex ecosystem
    - lots of different technologies involved, mainly html/css/js & ruby
    - we will only touch a small sub-section of it today
    - front-end frameworks (CSS & JS)
    - asynchronous jobs
    - cloud deployments
    - databases

### MVC Architecture
    - Model: object properties and methods
    - View: what is displayed to user
    - Controller: handles request routing

### Convention over configuration
    - Many 'sane defaults' that save developers from writing repetitive code


## Application: Character Maker

### Create a new app

1. rails new char_maker

2. cd char_maker

3. rails server

4. In browser: visit localhost:3000
    - should see "Yay! You're on Rails!"

### Overview of directory structure
    - we will mostly be working within app/ and config/

### Start creating characters

1. rails generate scaffold Character name:string health:integer strength:integer
   intelligence:integer agility:integer luck:integer

   - will create a character object with 6 attributes: name, and 5 stats

2. refresh page, see error
    - run rails db:migrate
    - migrations modify the database when you add/remove/modify objects

3. These characters are CRUD objects
    - Create, read, update, destroy

4. Notice the routes
    - rails uses a number of conventions, including routes/paths
    - default routes generated by scaffold
    - we will create a custom route later

### Add a portrait for characters

1. active_storage:install

2. db:migrate

3. config/storage.yml, only keep local

4. edit config/environments/development.rb
    - notes on environments: 3 files, test.rb, development.rb, and production.rb
    - config.active_storage.service = :local

5. Attach files to records
    - edit app/models/character.rb
        - has_one_attached :avatar

6. edit app/views/characters/_form.html.erb
    - discuss partials
    - templates, html with embedded ruby, html.erb

7. Allow avatar parameter through
    - edit controller: app/controller/characters_controller.rb
    - discuss strong-params and white-listing
    
8. Display avatar on index page
    - edit thead to have <th>Avatar</th>
    - in table, add: image_tag(character.avatar, size: '100x100')

8. Display avatar on character page, app/views/characters/show.html.erb
    -  <p>
        <%= image_tag(@character.avatar, size: '250x250') %>
       </p>

### Add some styling with Bootstrap

1. Modify Gemfile
    - gem 'bootstrap', '~> 4.1.3'
    - gem 'jquery-rails'

2. bundle install

3. restart server

4. rename application.css, b/c bootstrap uses scss
    - mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss

5. edit app/assets/stylesheets/application.scss
    - remove *= lines (13 and 14)
    - add: @import 'bootstrap';

6. add bootstrap dependencies to app/asssets/javascripts/application.js
    //= require jquery3
    //= require popper
    //= require bootstrap-sprockets

7. Add table styling to index page
    - app/views/characters/index.html.erb
    - replace:  <table>
    - with:     <table class="table table-dark table-striped">

8. Change page title
    - replace:  <h1>Characters</h1> with your own title
    - try       <h1 class="text-center">Your Party</h1>

9. Change "New" link_to to a button:
    - <%= button_to 'New Character', new_character_path, method: "get", class: "btn btn-primary text-center"%>

10. Pad/center table
    - add to app/assets/stylesheets/characters.scss:
        - .table-padded {
             margin: auto;
             width: 80%;
           }

    - add to app/assets/stylesheets/application.scss:
        - @import 'characters.scss';

11. Center New Char screen
    - 

11. Add a page background
    - move background.jpg to app/assets/images/
    - in app/assets/stylesheets/application.scss, add:
        body {
            background-image: image-url(background.jpg);
            background-size: cover;
        }

12. Could style the new char screen as a table

